<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>卖家中心</title>
	<!--获取屏幕宽度，根据屏幕宽度进行自适应-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--引入Bootstrap-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

	<!--引入搜索框 css-->
	<link type="text/css" href="css/vip.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!--自定义工具-->
	<script src="js/HttpUtil.js"></script>
	<!--导入vue 包-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	<!-- 引入样式 element-ui-->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 element-ui-->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>


	<style>
		a:hover {
			color: #cc3333;
			text-decoration: none;
		}

		a {
			color: black;
			cursor: pointer;
		}
	</style>
</head>
<body>


<div class="container-fluid" style="margin-top: 1%">
	<!-- 头信息 -->
	<header>
		<div class="col-xs-offset-1">
			<img src="../view-api/images/vip.logo.png">
		</div>
		<hr>
		<div class="row" style="background-color: #A4D3EE">
			<div class="col-xs-2 col-lg-offset-1">
				<h3>GitBug 商城商品管理</h3>
			</div>

		</div>

	</header>

	<div class="row">
		<div class="col-xs-1 col-md-offset-1" style="background-color:whitesmoke;height:86%;position: absolute">

			<h5 style="padding:50% 0 10% 20%"><a href="home_admin.html">概况</a></h5>
			<h5 style="padding:10% 0 10% 20%"><a href="goods-manage.html">商品管理</a></h5>

			<h5 style="padding:10% 0 10% 20%"><a href="orderItems_admin.html">订单管理</a></h5>
			<h5 style="padding:10% 0 10% 20%"><a href="data_analyse.html">数据中心</a></h5>
			<h5 style="padding:10% 0 10% 20%" @click="isCoupon = !isCoupon"><a href="#">优惠券</a></h5>
		</div>
		<div class="col-lg-offset-2 " style="margin-top: 1%">
			<h3>个人中心&nbsp>&nbsp商品管理</h3>
			<div class="col-lg-offset-0 col-md-12 " style="padding-top:15px;border-bottom: 3px solid deeppink">

			</div>
		</div>
		<!-- 头信息 搜索栏  -->
		<div class="col-lg-offset-2 col-md-9 " id="goods_vue" style="padding-top: 1%">
			<div>
				<form class="form-horizontal">

					<div class="col-md-1">
						<a href="insertgoods.html">
							<el-button type="info">新增商品</el-button>
						</a>
					</div>
					<label for="type" class="col-sm-1 control-label">商品状态</label>
					<div class="col-md-1" style=";width: 150px">
						<form>
							<select class="form-control"  v-model="status">
								<option value="" style="color: deeppink;font-size: large" ></option>
								<option value="上架商品" style="color: deeppink;font-size: large">上架商品</option>
								<option value="下架商品" style="color: deeppink;font-size: large">下架商品</option>
							</select>
						</form>
					</div>
				</form>
			</div>
			<div class="col-md-4" >
				<input type="text" id="type" class="search-input" v-model="searchByType1" placeholder="手机">
				<button type="submit" @click="searchByType" class="search-btn"><img src="../view-api/images/search.jpg">
				</button>
			</div>



			<table class="table table-striped table-bordered table-hover" style="margin-top: 1%">
				<thead>
				<tr class="success" style="font-size: 18px">
					<th style="width: 80px;text-align: center">编号</th>
					<th style="width: 260px;text-align: center">商品名称</th>
					<th style="width: 80px;text-align: center">商品价格</th>
					<th style="width: 80px;text-align: center">库存</th>
					<th style="width: 260px;text-align: center">商品介绍</th>
					<th style="width: 132px;text-align: center">商品展示</th>
					<th style="width: 75px;text-align: center">状态</th>
					<th style="width: 80px;text-align: center">类型</th>
					<th style="width: 150px;text-align: center">更新时间</th>
					<th style="width: 60px;text-align: center">操作</th>
				</tr>

				</thead>
				<tbody>
				<tr v-for="goods in goodsList" style="font-size: 16px;text-align: center;height: 12%">
					<td style="padding-top: 4%;height: 110px">{{goods.id}}</td>
					<td style="color: #009cda;height: 110px;text-align:center;vertical-align:middle">{{goods.goodsName}}</td>
					<td style="padding-top: 4%;height: 110px;color: red">{{goods.price | showPrice}}</td>
					<td style="padding-top: 4%;height: 110px">{{goods.count}}</td>
					<td style="height: 110px;text-align:center;vertical-align:middle">{{goods.introduction}}</td>
					<td style="text-align: center;vertical-align:middle"><img :src="goods.imgUrl" style="width: 130px;height: 130px"></td>
					<td style="padding-top: 4%;height: 110px;color: orange">{{goods.status | showStatus}}</td>
					<td style="padding-top: 4%;height: 110px;color: deeppink">{{goods.type}}</td>
					<td style="padding-top: 4%;height: 110px">{{goods.updateTime | formatDate}}</td>

					<td class="inputButton" style="text-align:center;padding-top: 2%">
<!--
						<input type="button" class="button_shelves btn btn-success"
									 @click="shelves(goods.id)" value="上架">
						<input type="button" class="button_sold_out btn btn-warning"
									 @click="soldOut(goods.id)" value="下架">-->
						<template>
							<el-button :plain="true" type="success" icon="el-icon-check" round  @click="shelves(goods.id)" value="上架">上架</el-button>
							<el-button :plain="true" type="warning" icon="el-icon-warning" round  @click="soldOut(goods.id)" value="下架">下架</el-button>

							<el-button :plain="true" type="danger" icon="el-icon-delete" round  @click="del(goods.id)" value="删除">删除</el-button>
							<el-button :plain="true" type="info"  icon="el-icon-info" round @click="jump(goods.id)">修改</el-button>
						</template>

						<!--<template>
							<el-button :plain="true" type="danger" icon="el-icon-delete" round  @click="del(goods.id)" value="删除"></el-button>
						</template>-->
						<!--<input type="button" class="button_del btn btn-danger"
									 @click="del(goods.id)" value="删除">-->
					</td>
				</tr>
				</tbody>
			</table>
			<div style="font-size: large;text-align: center">

				<div v-for="(item,index) in currentPageData" :key="index">
					<p>{{item.name}}</p>
				</div>

				<a @click="prevPage()">上一页</a>
				<span>第{{currentPage}}页/共{{totalPage}}页</span>
				<a @click="nextPage()">下一页</a>
			</div>


		</div>


		<!-- 页脚信息 -->

		<div class="container-fluid" style="background-color: ghostwhite; margin-top: 5%; ">
			<div class="row" style="margin-top: 2%;margin-bottom: 5%" >
				<div class="col-xs-1 col-xs-offset-2">
					<p style="">视频中心</p>
					<a>
						<div style="padding-top: 10%">新闻发布会</div>
					</a>
					<a>
						<div style="padding-top: 5%">发展历程</div>
					</a>
					<a>
						<div style="padding-top: 5%">直播</div>
					</a>
					<a>
						<div style="padding-top: 5%">员工视频</div>
					</a>
				</div>
				<div class="col-xs-1 ">
					<p style="">发现</p>
					<a>
						<div style="padding-top: 10%">成功故事</div>
					</a>
					<a>
						<div style="padding-top: 5%">公司年报</div>
					</a>
					<a>
						<div style="padding-top: 5%">管理层信息</div>
					</a>
					<a>
						<div style="padding-top: 5%">媒体图库</div>
					</a>
				</div>
				<div class="col-xs-1 ">
					<p style="">关注我们</p>
					<a>
						<div style="padding-top: 10%">新浪微博</div>
					</a>
					<a>
						<div style="padding-top: 5%">微信公众号</div>
					</a>
					<a>
						<div style="padding-top: 5%">优酷视频</div>
					</a>
					<a>
						<div style="padding-top: 5%">哔哩哔哩</div>
					</a>
				</div>
				<div class="col-xs-1 ">
					<a href="http://localhost:80/views/view-api/home2.html">商城主页</a>
				</div>

			</div>
		</div>

	</div>
</body>
</html>


<script>

	const vue = new Vue({
		el: '#goods_vue',
		data: {
			goodsList: {},
			totalPage: 1, // 统共页数，默认为1
			currentPage: 1, //当前页数 ，默认为1
			pageSize: 5, // 每页显示数量
			currentPageData: "",//当前页显示内容
			searchByType1: "",
			status: "",
		},

		filters: {
			//价格
			showPrice(price) {
				return '￥' + price.toFixed(2)
			},

			showStatus(status) {
				switch (status) {
					case 0:
						return "已下架";
					case 1:
						return "热售中";
				}
			},

			//时间格式化
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		methods: {

			//商品下架
			soldOut: function (id) {
				let url = "goods/soldOut";
				let thisObject = this;
				let param = {id: id};
				postWithParams(url, param, function () {
					//this._data.currentPage
					thisObject.Pagination();
				});
			},


			//商品上架
			shelves: function (id) {
				let url = "goods/shelves";
				let thisObject = this;
				let param = {id: id};
				postWithParams(url, param, function () {
					thisObject.Pagination();
				})
			},


			//获取商品id并跳转到修改页面
			jump: function (id) {
				console.log(id)
				window.location = "updateGoods.html?"+id;

			},

			//删除商品
			del: function (id) {

				this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					let url = "goods/delete";
					let thisObject = this;
					let param = {id: id};
					postWithParams(url, param, function () {
						thisObject.Pagination();
					})

					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//根据商品类型获取商品信息，默认从id全部获取
			searchByType: function () {

				if ((this._data.status != null) && (this._data.searchByType1 != null)) {
					this._data.currentPage = 1;
					this.Pagination();
					return;
				}
				let url = "goods/searchGoodsByType"
				let searchByType1 = this.searchByType1;
				let params = {searchByType: searchByType1};
				let thisObject = this;
				postWithParams(url, params, function (data) {
					thisObject.goodsList = data;
					//计算总共的页数
					thisObject.totalPage = data.totalPage;
				})
				this._data.currentPage = 1;
				console.log(this._data.currentPage);
			},


			//分页查询
			Pagination() {

				if (this._data.status === "上架商品") {
					status = 1;
					console.log(status)
				} else if (this._data.status === "下架商品") {
					status = 0;
				}
				let thisObject = this;
				//根据地址栏 获取商品id，?status=0   ?id=1
				//let status = window.location.search.substring(8)
				postWithParams('/goods/byPage', {
					currentPage: this._data.currentPage,
					pageSize: this._data.pageSize,
					searchByType: this._data.searchByType1,
					status: status,
				}, (data) => {
					this._data.goodsList = data.list;
					console.log(this._data.goodsList)
					//计算总共的页数
					thisObject.totalPage = data.totalPage;
				})

			},



			//上一页
			prevPage() {

				if (this.currentPage === 1) {
					return false;
				} else {
					this.currentPage--;
				}
				//调用分页查询
				this.Pagination();
			},



			// 下一页
			nextPage() {
				if (this.currentPage === this.totalPage) {
					return false;
				} else {
					this.currentPage++;
				}
				//调用分页查询
				this.Pagination();
			}
		},


		mounted: function () {
			//页面加载完成，并且vue对象加载完成之后调用
			this.Pagination();
		},

	});
</script>
